<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    <table></table> 是用于定义表格的标签
    <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中
    <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
    字母 td 指表格数据，即数据单元格的内容 
    <thead></thead>用于定义表格的头部，<thead>内部必须有<tr>标签，一般是位于第一行
    <tbody></tbody>用于定义表格的主体，主要用于放数据主题
    以上标签放在 <table></table>内-->
    <table>
      <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
      </tr>
      <tr>
        <td>影</td>
        <td>女</td>
        <td>18</td>
      </tr>
      <tr>
        <td>甘雨</td>
        <td>女</td>
        <td>18</td>
      </tr>
    </table>
    <h4>表头单元格标签</h4>
    <table>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>影</td>
        <td>女</td>
        <td>18</td>
      </tr>
      <tr>
        <td>甘雨</td>
        <td>女</td>
        <td>18</td>
      </tr>
    </table>
    <h4>表格属性</h4>
    <!--     
    align 规定表格相对周围元素的对齐方式 属性值有: left,center 和 right
    border 规定表格单元是否拥有边框，默认为""，表示没有边框 属性值有: 1 和 ""
    cellpadding 规定单元边沿与其内容之间的空白，默认为 1 像素
    cellspacing 规定单元格之间的空白，默认为 2 像素
    width 规定表格的宽度
    height 规定表格的长度 -->
    <table
      align="center"
      border="1"
      cellpadding="30"
      cellspacing="10"
      width="500"
      height="250"
    >
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>影</td>
          <td>女</td>
          <td>18</td>
        </tr>
        <tr>
          <td>甘雨</td>
          <td>女</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>

    <h4>合并单元格</h4>
    <!-- 跨行合并：rowspan = "合并单元格的个数"
    跨列合并：colspan = "合并单元格的个数"
    跨行：最上侧单元格为目标单元格，写合并代码
    跨列：最左侧单元格为目标单元格，写合并代码 
    <>合并单元格三部曲
    1.先确定是跨行还是跨列合并；
    2.找到目标单元格，写上合并方式 = 合并的单元格的数量。比如：<td colspan="2"></td>
    3.删除多余的单元格-->
 
   <table align="left" border="1" width="500" height="250" cellspacing="0">
      <tr>
        <td></td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table><br>
    
    <h4>无序列表</h4>
    <!-- 
    <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的 
    <li>与</li>之间相当于一个容器，可以容纳所有元素-->
    <h5>水果</h5>
   <ul>
      <li>苹果</li>
      <li>西瓜</li>
      <li>甘蔗</li>
      <li>
        <p>nice!</p>
      </li>
    </ul>
  
    <h4>有序列表</h4>
    <!-- 用法和无序列表相似 -->
    <h5>人物排行榜</h5>
    <ol>
      <li>影 1000</li>
      <li>甘雨 800</li>
      <li>胡桃 890</li>
    </ol>

    <h4>自定义列表</h4>
    <!-- <dl></dl>里面只能包含<dt>和<dd>
    <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd> 
    <dt>和<dd>里面可以放任何标签-->
    <dl>
      <dt>关注我们</dt>
      <dd>影</dd>
      <dd>胡桃</dd>
      <dd>甘雨</dd>
    </dl>

    <h4>表单标签</h4>
    <!--
    <input type="" /> 是单标签
    属性值有：
    button 定义可以点击按钮(多数情况下，用于通过JavaScript启动脚本)
    checkbox 定义复选框
    file 定义输入字段和"浏览"按钮，供文件上传
    hidden 定义隐藏的输入字段
    image 定义图像形式的提交按钮
    password 定义密码字段，该字段中的字符被掩码
    radio 定义单选按钮
    reset 定义重置按钮，重置按钮会清除表单中的所有数据
    submit 定义提交按钮，提交按钮会把表单数据发送到服务器
    text 定义单行的行输入字段，用户可在其中输入文本，默认宽度为 20 个字符 -->
    <form action="demo.php" method="post" name="name">
      用户名：<input type="text" name="username" maxlength="6" /><br />
      密码:<input type="password" name="pwd" /><br />
      <!-- name 是表单元素名字，这里性别单选按钮必须有相同的名字才可以实现多选一 
      单选按钮和复选框可以设置 checked 属性，当页面打开的时候就可以默认选中这个按钮-->
      性别：男<input type="radio" name="sex" value="男" />女<input
        type="radio"
        name="sex"
        value="女"
      /><br />
      爱好：吃饭
      <input type="checkbox" name="checkbox" value="吃饭" /> 玩原神<input
        type="checkbox"
        name="hobby"
        value="玩原神"
        checked="checked"
      />
      睡觉<input type="checkbox" name="hobby" value="睡觉" /><br />
      <input type="submit" value="免费注册" />
      <input type="reset" value="重新填写" /><br />
      <input type="button" value="获取短信验证码" /><br />
      <input type="file" /><br />

      <!-- <label>标签 -->
      <label for="text">用户名：</label><input type="text" id="text" /><br />
      <input type="radio" id = "nan"><label for="nan">男</label>
      <input type="radio"id = "nv"><label for="nv">女</label<br />
        <br>
     <input type="submit"><input type="reset">
    </form>
  </body>
</html>
